<template>
	<view class="detail-container">
		<view class="push-card" v-if="push">
			<view class="push-header">
				<image class="avatar" :src="getAvatarUrl(push.publisherAvatar)" mode="aspectFill"></image>
				<view class="user-details">
					<text class="username">{{ push.publisherName || '用户' }}</text>
					<text class="publish-time">{{ formatTime(push.createdAt) }}</text>
				</view>
			</view>
			<view class="push-content">
				<view class="cover-wrapper" v-if="push.coverImage">
					<image class="cover-image" :src="getImageUrl(push.coverImage)" mode="aspectFill" @click="previewImage([push.coverImage], 0)" />
				</view>
				<text class="push-text">{{ push.content }}</text>
				<view class="push-images" v-if="push.images && push.images.length">
					<image
						class="push-image"
						v-for="(img, idx) in push.images"
						:key="idx"
						:src="getImageUrl(img)"
						mode="aspectFill"
						@click="previewImage(push.images, idx)"
					/>
				</view>
			</view>
			<view class="push-stats">
				<text>👁️ {{ push.viewCount || 0 }}</text>
				<text>❤️ {{ push.likeCount || 0 }}</text>
				<text>💬 {{ push.commentCount || 0 }}</text>
			</view>
		</view>

		<view class="comments-section">
			<view class="section-title">评论</view>
			<view v-if="comments.length === 0 && !loading" class="empty">暂无评论</view>
			<view class="comment-item" v-for="c in comments" :key="c.id">
				<image class="c-avatar" :src="getAvatarUrl(c.avatar)" mode="aspectFill" />
				<view class="c-body">
					<view class="c-header">
						<text class="c-username">{{ c.username || '用户' }}</text>
						<text class="c-time">{{ formatTime(c.createdAt) }}</text>
					</view>
					<text class="c-content">{{ c.content }}</text>
				</view>
			</view>
			<view class="load-more" v-if="hasMore && !loading">
				<text class="load-more-text" @click="loadMore">加载更多</text>
			</view>
			<view class="loading" v-if="loading">加载中...</view>
		</view>

		<view class="comment-bar">
			<input class="comment-input" v-model="commentContent" placeholder="写下你的评论..." />
			<button class="comment-btn" :disabled="!commentContent.trim()" @click="submitComment">发送</button>
		</view>
	</view>
</template>

<script>
import { getAvatarUrl, getImageUrl } from '../../utils/imageUtils.js'

export default {
	data() {
		return {
			pushId: null,
			push: null,
			comments: [],
			current: 1,
			size: 10,
			hasMore: true,
			loading: false,
			commentContent: ''
		}
	},
	onLoad(query) {
		this.pushId = Number(query.id)
		this.fetchDetail()
		this.fetchComments()
	},
	methods: {
		// 获取头像URL
		getAvatarUrl(avatar) {
			return getAvatarUrl(avatar);
		},
		
		// 获取图片URL
		getImageUrl(imageUrl) {
			return getImageUrl(imageUrl);
		},

		async fetchDetail() {
			try {
				const res = await this.$http.get(`/user/push/${this.pushId}`)
				if (res.code === 200) {
					this.push = res.data
				}
			} catch (e) {
				uni.showToast({ title: '加载详情失败', icon: 'none' })
			}
		},
		async fetchComments() {
			if (this.loading || !this.hasMore) return
			this.loading = true
			try {
				const res = await this.$http.get(`/user/push/${this.pushId}/comments`, { current: this.current, size: this.size })
				if (res.code === 200) {
					const { records, total } = res.data
					this.comments = this.current === 1 ? records : [...this.comments, ...records]
					this.hasMore = this.comments.length < total
				}
			} catch (e) {
				uni.showToast({ title: '加载评论失败', icon: 'none' })
			} finally {
				this.loading = false
			}
		},
		loadMore() {
			if (!this.hasMore || this.loading) return
			this.current++
			this.fetchComments()
		},
		async submitComment() {
			if (!this.commentContent.trim()) return
			try {
				const res = await this.$http.post('/user/push/comment', { pushId: this.pushId, content: this.commentContent.trim() })
				if (res.code === 200) {
					uni.showToast({ title: '评论成功', icon: 'success' })
					this.commentContent = ''
					this.current = 1
					this.hasMore = true
					this.fetchDetail()
					this.fetchComments()
				}
			} catch (e) {
				uni.showToast({ title: '评论失败', icon: 'none' })
			}
		},
		previewImage(images, idx) {
			uni.previewImage({ urls: images, current: images[idx] })
		},
		formatTime(ts) {
			if (!ts) return ''
			const now = new Date()
			const date = new Date(ts)
			const diff = now - date
			const m = 60 * 1000, h = 60 * m, d = 24 * h
			if (diff < m) return '刚刚'
			if (diff < h) return Math.floor(diff / m) + '分钟前'
			if (diff < d) return Math.floor(diff / h) + '小时前'
			if (diff < 7 * d) return Math.floor(diff / d) + '天前'
			return date.toLocaleDateString()
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 120rpx;
}
.push-card {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}
.push-header { display:flex; align-items:center; }
.avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; }
.username { font-size: 28rpx; font-weight: 600; color: #333; }
.publish-time { font-size: 22rpx; color: #999; }
.push-content { margin-top: 20rpx; }
.push-text { font-size: 28rpx; color: #333; line-height: 1.6; }
.push-images { display: grid; grid-template-columns: repeat(3,1fr); gap: 10rpx; margin-top: 16rpx; }
.push-image { width: 100%; height: 200rpx; border-radius: 10rpx; object-fit: cover; }
.push-stats { display:flex; gap: 24rpx; margin-top: 16rpx; color:#666; font-size:24rpx; }
.comments-section { background:#fff; margin: 20rpx; border-radius:16rpx; padding: 20rpx; }
.section-title { font-size: 28rpx; font-weight: 600; margin-bottom: 12rpx; }
.empty { color:#999; font-size: 24rpx; padding: 20rpx 0; }
.comment-item { display:flex; gap: 16rpx; padding: 16rpx 0; border-bottom: 1rpx solid #f2f2f2; }
.comment-item:last-child { border-bottom: none; }
.c-avatar { width: 60rpx; height: 60rpx; border-radius: 50%; }
.c-header { display:flex; justify-content: space-between; }
.c-username { font-size: 26rpx; color: #333; }
.c-time { font-size: 22rpx; color: #999; }
.c-content { font-size: 26rpx; color:#444; margin-top: 6rpx; display:block; }
.load-more { text-align:center; padding: 20rpx; }
.load-more-text { color:#007aff; font-size: 26rpx; }
.loading { text-align:center; color:#999; font-size: 24rpx; padding: 10rpx 0; }
.comment-bar { position: fixed; left:0; right:0; bottom:0; display:flex; gap: 12rpx; background:#fff; padding: 12rpx; border-top: 1rpx solid #eee; }
.comment-input { flex:1; border:1rpx solid #e0e0e0; border-radius: 8rpx; padding: 10rpx; font-size: 26rpx; }
.comment-btn { background:#007aff; color:#fff; border:none; padding: 0 24rpx; border-radius: 10rpx; font-size: 26rpx; }
</style>


